<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script type='text/javascript' src='../js/jquery-2.2.3.min.js'></script>
    <title>恋爱攻略</title>
    <style type="text/css">
    /**/
    * {
        margin: 0px;
        padding: 0px;
    }

    #page {
        padding: 20px;
    }

    #top img {
        width: 100%;
    }

    h4,
    h5 {
        margin: 10px auto;
        /*color: #0ac5da;*/
    }
    .name{
        color: #0ac5da;
        
     }
    .msg {
        font-size: 14px;
        line-height: 20px;
        font-weight: bold;
    }

    .msg span {
        font-weight: normal;
    }

    .chick_style {
        line-height: 40px;
        color: white;
        background: #de756e;
        margin: 10px auto;
        text-align: center;
        border-radius: 4px;
    }

    .img_style {
        margin-top: 10px;
    }

    .img_style li {
        width: 30px;
        display: inline-block;
        border-radius: 50%;
        height: 30px;
        background: gray;
    }

    .img_style li img {
        width: 30px;
        display: inline-block;
        border-radius: 50%;
        height: 30px;
    }

    .nomal {
        font-size: 14px;
        line-height: 26px;
        color: gray;
    }

    .list_tyle {
        font-size: 14px;
        line-height: 26px;
    }

    .get_style {
        /*display: block;*/
        float: right;
        width: auto;
        margin-left: 10px;
        border: 1px solid #d1d1d1;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        color: #999;
    }

    #float_view {
        width: 100%;
        height: 100%;
        /*background: rgba(0, 0, 0, 0.4);*/
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 666;
    }

    #msg {
        width: 40%;
        position: absolute;
        background: #d1d1d1;
        top: 200px;
        left: 30%;
        border-radius: 8px;
        text-align: center;
        color: red;
        line-height: 50px;
        font-size: 16px;
    }

    input {
        width: 100%;
        height: 25px;
        line-height: 35px;
        border: 1px solid gray;
        margin-top: 10px;
        border-radius: 2px;
    }
 /*评论框*/
       .profile_chat {
            margin-top: 5px;
            padding: 5px;
        }

        /*评论输入框*/
        .btn-textarea {
            height: 50px;
            border: 1px solid #999999;
            width: 90%;
            padding: 5px 5px 5px 10px;
        }

        /*评论按钮*/
        .btn-chat {
            line-height: 25px;
            background: #00c4da;
            padding: 2px 15px;
            border-radius: 5px;
            color: #fff;
            font-size: 14px;
            float: right;
            margin-right: 20px;
        }

        /*评论图标*/
        .btn-chat-icon {
            vertical-align: middle;
            margin-right: 2px;
            height: 18px;
        }
    </style>
</head>

<body>
     <div id="float_view">
            <div id="msg" style="color: #fff">

            </div>
        </div>
    <div id="page" style="position: relative;">
        <h3 id="name" style="height: 50px;"></h3>
         <div style="color: gray;">
            <span style="border-radius: 10px;line-height: 14px;padding: 1px 8px;border: 1px solid gray;font-size: 13px;" id='source'></span>
            <label style="margin-left: 5px;" id="data"></label>
            <label style="margin-left: 5px;color: #00c4da;font-size: 14px;">朝阳E恋</label>

            <label style="width: 60px;height: 40px;display: inline-block;position: absolute;right: 0px;top:50px;"><img src="../images/zan-un.png" style="width: 40px;height: 40px;" id='coll'><span style="width: 20px;font-size: 11px;right: 0px;bottom: 10px;color: #00c4da;" id='num'></span></label>

        </div>

        <!-- <img src="../images/ban4.png"> -->
         <div id="content" style="margin-top: 10px;">
         </div>   
   
        <div class="line_style"></div>
       
        <div class="line_style">
            <div style="border-top:2px solid #999;">
                <h2 style="margin: 5px;">文章评论</h2>
                 <div class="profile_item">
                        
                                <div class="profile_item-img" style="margin-bottom: 5px;">
                                   <img src="" style="width: 50px;height: 50px;border-radius: 25px;position: absolute;left: 10px;" class="img-responsive" alt="">
                                    <div style="margin-left: 60px;">
                                         <h5 ></h5>
                                    
                                    <p style="color: #999;font-size: 14px;"></p>
                                    </div>
                                </div>
                            
                                <div class="profile_item-img" style="margin-bottom: 5px;">
                                   <img src="" style="width: 50px;height: 50px;border-radius: 25px;position: absolute;left: 10px;" class="img-responsive" alt="">
                                    <div style="margin-left: 60px;">
                                         <h5 ></h5>
                                    
                                    <p style="color: #999;font-size: 14px;"></p>
                                    </div>
                                </div>
                        
                               
                            
                        </div>
                        <div class="profile_chat">
                            
                                                <h4>
                                                    <img class="btn-chat-icon" src="../images/h1.png">评论</label>
                                                </h4>
                                                <textarea id='speak_msg' class="btn-textarea" placeholder="输入你的想法。。。。。"></textarea>
                                                <div style="margin-top: 5px;">
                                                    <span class="btn-chat" id='speakSub'>提交</span>
                                                </div>
                                                <div style="clear: both"></div>
                        </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    var  isCando=false;
    $(function() {
        if (localStorage.getItem('number')) {

           $.ajax({
            url: "/member/getMemberinfoByNum?number=" + localStorage.getItem('number'),
            type: "get",
            dataType: "json",
            success: succesFunc,
            error: errorFunc
        });

        function succesFunc(res) {
            if (res.code == 200) {
                if (res.data[0].yn) {
                  isCando=true;
                } else {
                    // $("#float_view").show();
                    // $("#msg").text("还未通过审核");
                }

            }
        }

        function errorFunc(res) {

        }

        }else{
         // $("#float_view").show();
         // $("#msg").text("还不是会员");

        }

    })


   $("#float_view").hide();
    var isColl=false;
            function getUrlValue(){
    var res = location.search.toLowerCase();

    var qs = (res.length > 0 ? res.substring(1) : ""),

        args = {},

        items = qs.length ? qs.split("&") : [],

        item = null,

        name = null,

        value = null,

        i = 0,

        len = items.length;

    for (i = 0; i < len; i++) {

        item = items[i].split("=");

        name = decodeURIComponent(item[0]);

        value = decodeURIComponent(item[1]);

        if (name.length) {

            args[name] = value;

        }

    }
    return args;

    };
    var args = getUrlValue();
     $(function(){
        $.ajax({
            method: "get",
            url: "/article/getArticleDetail?id=" + args.id,
            success: function(res) {
                console.log(res.data[0])
                $("#source").text(res.data[0].SOURCE);
                $("#name").text(res.data[0].TITLE);
                $("#data").text(res.data[0].ADD_DATE.split("T")[0])
                $("#content").empty().append(res.data[0].CONTENT)
            },
            error: function(error) {
                console.log(error)
            }
        })
     })
$("#coll").click(function(){
    if(isCando){
        if (!isColl) {
        $.ajax({
         method: "get",
         url: "/collection/type?coll_type=3&actNum=" + args.id + "&id=" + localStorage.getItem('number'),
         success: function(res) {
                    console.log(res)
                    getCollection();
                },
                error: function(error) {
                    console.log(error)
                }
         })

    }else{
         $.ajax({
                method: "get",
                url: "/collection/cancelColl?actNum=" + args.id + "&id=" + localStorage.getItem('number'),
                success: function(res) {
                    console.log(res)
                     getCollection();
                },
                error: function(error) {
                    console.log(error)
                }
            })
    }
    }else{


           $("#float_view").show();
        $("#msg").text("请先成为会员");
    }
    
})


    getCollection();
    function getCollection() {
        $.ajax({
            method: "get",
            url: "/collection/isColl?actNum=" + args.id + "&num=" + localStorage.getItem('number'),
            success: function(res) {
                console.log("****")
                console.log(res.list.length)
                $("#num").text(res.list.length)
                if (res.data == '已关注') {
                    isColl=true;
                    $("#coll").attr("src",'../images/zan-done.png')
                    $("#num").css("color",'red')
                    console.log("*****"+isColl)
                } else {
                   isColl=false;
                   $("#coll").attr("src",'../images/zan-un.png')
                   $("#num").css("color",'#00c4da')
                    console.log("*****"+isColl)
                }
            },
            error: function(error) {
                console.log(error)
            }
        })
    }
    $('#speakSub').click(function() {
       if(isCando){
         var json = {
            mem_id: localStorage.getItem('number'),
            acti_no: args.id,
            content: $("#speak_msg").val()
        }
        $.ajax({
            method: "post",
            data: json,
            url: "/activity/activityComments",
            success: function(res) {
                getComment();
                 $("#float_view").show();
                $("#msg").text("已评论,审核中...")
            },
            error: function(error) {
                console.log(error)
            }
         })
       }else{
           $("#float_view").show();
        $("#msg").text("请先成为会员");

       }
        

    })
     $("#float_view").click(function(){

        $("#float_view").hide();
     })
    getComment() 
    function getComment() {
        $.ajax({
            method: "get",
            url: "/activity/getActivityComments?acti_no=" + args.id,
            success: function(res) {
                if (res.code == 200) {
                     
                    var shtml = '';
                    for (var i = 0; i < res.data.length; i++) {

                        shtml += '<div class="profile_item-img" style="margin-bottom: 5px;height: 60px;">'
                        shtml += '<img src='+res.data[i].mem_img+' style="width: 50px;height: 50px;border-radius: 25px;position: absolute;left: 10px;border:1px solid gray;" class="img-responsive" alt="">'
                        shtml += '<div style="margin-left: 60px;">'
                        shtml += '<h5 class="name">'+res.data[i].nickname+'</h5>'

                        shtml += '<p style="color: #999;font-size: 14px;">'+res.data[i].content+'</p>'
                        shtml += '</div>'
                        shtml += '</div>'
                    }
                  
                   $(".profile_item").empty().append(shtml);
                }

        
            },
            error: function(error) {
                console.log(error)
            }
        })
    }

    </script>
</body>

</html>